<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 130px;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
        /* 
            封装的函数只有一个效果 left  width 

            想再增加一个运动属性   比如 opacity 

            //1 增加参数的数量  
            // 缺点: 你设置了多个  
            // 用的时候必须传这些 否则 报错  

            //2. 传递对象作为参数 
            // {left:500,opacity:0.6}
            // 传多少个键值对 动多少个样式 


        
        */

        // function sport(ele, mystyle, target) {
        //     // 获取元素 当前的  样式
        //     // 如果是 opacity 目标变成乘以100
        //     if(mystyle === 'opacity'){
        //         target *= 100
        //     }
        //     const num = setInterval(function () {
        //         // 放到定时器里边 就可以拿到它新的位置  
        //         let init;
        //         if(mystyle === 'opacity'){
        //             init = window.getComputedStyle(ele)[mystyle])*100
        //         }
        //         else{
        //             init = parseInt(window.getComputedStyle(ele)[mystyle])
        //         }
        //         // 记录新的运动距离
        //         let duration = (target-init)/10;//记录的是本次运动的距离
        //         // 这种写法 适合 left  width  top等效果  opacity 是 0~1之间的小数 
        //         // 不适合这种写法   
        //         // 如何既能满足 left top 又能满足  opacity   
        //         // 让opacity乘以 100 然后 赋值的时候再除以100 
        //         duration = duration>0?Math.ceil(duration):Math.floor(duration)
        //         // console.log(duration);
        //         if (init === target) {
        //             clearInterval(num);
        //         }else{
        //             if(mystyle === 'opacity'){
        //                 ele.style[mystyle] = (init+duration)/100;
        //             }
        //             else{
        //                 ele.style[mystyle] = init+duration+'px';
        //             }

        //         }
        //     }, 30);
        // }


        // // sport(ele, mystyle, target)


        // var divele = document.querySelector('div');
        // divele.onclick = function () {
        //     sport(this,'opacity',0.09);

        // }


        function move(ele, obj) {
            for (let k in obj) {
                const mystyle = k; // let变量值可以修改 
                let target = obj[k]; // const 常量  里边的值不可以修改 
                if (mystyle === 'opacity') {
                    target *= 100;
                }
                const num = setInterval(function () {
                    // 放到定时器里边 就可以拿到它新的位置  
                    let init;
                    if (mystyle === 'opacity') {
                        init = window.getComputedStyle(ele)[mystyle] * 100
                    }
                    else {
                        init = parseInt(window.getComputedStyle(ele)[mystyle])
                    }
                    // 记录新的运动距离
                    let duration = (target - init) / 10;
                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration)
                    // console.log(duration);
                    if (init === target) {
                        clearInterval(num);
                    } else {
                        if (mystyle === 'opacity') {
                            ele.style[mystyle] = (init + duration) / 100;
                        }
                        else {
                            ele.style[mystyle] = init + duration + 'px';
                        }

                    }
                }, 30);
            }
        }


        var divele = document.querySelector('div');
        divele.onclick = function () {
            move(this, { 'left': 500,width:666,'opacity': 0.3 });

        }
    </script>

</body>

</html>